import React from 'react'
import {connect} from 'react-redux'
import './AIGameCard.css'
import {withRouter} from 'react-router-dom'
import {formatDate, formatScheduleDate, getDifferenceBetweenDates} from "../../../utils/dateService";
import constants from "../../../utils/constants";
import InfoIcon from "../../../res/images/web/FootballGameCard/game／news@2x.png";
import {WhiteSpace, WingBlank} from "antd-mobile";
import {ICON_URL_PREFIX} from "../../../redux/game";
import DefaultTeamIcon from "../../../res/images/web/shared/缺省头像.png";
import GameAIModel from "../../../model/GameAIModel";
import LocalStorageService from "../../../utils/LocalStorageService";
import {formatDXQOdd} from "../../game-room/components/Main/index/BigSmallTable/BigSmallTable";


const AIGameCard = props => {

    const {
        game,
        history,
    } = props
    const model = new GameAIModel(game)
    const detail = model.detail()
    const status = detail.status
    const matchId = detail.matchId
    const eventId = detail.eventId
    const schedule = detail.schedule
    const startAt = detail.startAt
    const homeTeam = detail.host
    const awayTeam = detail.away
    const info = detail.info

    const {
        // matchId,
        // eventId,
        // status,
        // schedule,
        // startAt,
        // homeTeam,
        // awayTeam,
        gameInfo,
        seasonInfo,
        stageInfo,
        event,
        stage,
    } = game

    // 比赛状态判断条件
    const isEarly = status === 1
    const isStarted = status >= 2 && status <= 7
    const isFirstHalf = status === 2
    const isHalfTime = status === 3
    const isSecondHalf = status === 4
    const isFinished = status === 8
    const isDelay = status >= 9

    const startAtTimeObj = new Date(startAt * 1000)
    const scheduleTimeObj = new Date(schedule * 1000)
    const scheduleDateString = formatDate(scheduleTimeObj)
    let scheduleDateFormat = scheduleDateString.slice(4, 6) + '月' + scheduleDateString.slice(6) + '日'
    const scheduleTimeString = formatScheduleDate(scheduleTimeObj)
    const now = new Date()
    const diff = getDifferenceBetweenDates(startAtTimeObj, now)
    const scheduleDiv = (<div className='AI-game-card-time-not-started'>
        <span>{scheduleDateFormat} {scheduleTimeString}</span>
        {/*<div>*/}
        {/*    <span>{isDelay ? '推迟' : '未开赛'}</span>*/}
        {/*</div>*/}
    </div>)
    // console.log(pushDateString)
    let curTime
    if (isEarly) curTime = '未开赛'
    if (isFirstHalf) curTime = `上半场 ${diff.minutesDiff + 1}\'`
    if (isHalfTime) curTime = '半场 45\''
    if (isSecondHalf) curTime = `下半场 ${diff.minutesDiff + 45 + 1}\'`
    // const infoOffer = seasonInfo[3] === 1

    const competitionName = <span
        className='AI-game-card-competition'
        // style={{
        //     color: isEarly ? '#FA7268' : '#FFA500',
        // }}
    >{detail.c}</span>

    const curTimeTemplate = <span
        className='AI-game-card-cur-time'
    >{curTime}</span>

    const infoOffer = info === 1
    const lives = props.gameState.lives
    let isVodLive = false
    if (lives.length > 0 && lives.find(live => live.id === matchId)) {
        isVodLive = true
    }

    const infoIcon = <div className='AI-game-card-icon'>
        {/*<img src={InfoIcon} alt='' style={{width: '40px',}}/>*/}
        <span>情报</span>
    </div>

    const liveIcon = <div className='AI-game-card-icon'>
        <span>视频</span>
    </div>

    const teamIcon = (team, home = true) => {
        // const {
        //     detail,
        // } = team
        const {
            name,
            logo,
        } = team
        const nameSpan = <span style={{textAlign: home ? 'right' : 'left',}}>{name}</span>
        return <div
            className='AI-game-card-team-logo'
            style={{
                justifyContent: home ? 'flex-end' : 'flex-start',
            }}
        >
            {home ? nameSpan : null}
            <img
                src={logo === '' ? DefaultTeamIcon : ICON_URL_PREFIX + logo}
                alt=''
            />
            {home ? null : nameSpan}
        </div>
    }

    const homeScore = homeTeam.score
    const awayScore = awayTeam.score

    const score = <div className='AI-game-card-team-VS'>
        <span>{homeScore} : {awayScore}</span>
    </div>

    const vs = <div className='AI-game-card-team-VS AI-game-card-team-VS-not-started'>
        <span>-</span>
    </div>
    // const
    const RQ = model.RQ()
    const pan = RQ.pan
    const SFP = model.SFP()
    const SFPArr = SFP.oddsArr
    const DXQ = model.DXQ()
    const DXQArr = DXQ.oddsArr
    const odds = <div className='AI-game-card-odds'>
        {!RQ.oddsArr.every(i => i === 0)
            ? <div className='AI-game-card-odd-item'><span>亚盘 {pan}</span></div>
            : null
        }

        {!DXQArr.every(i => i === 0)
            ? <div className='AI-game-card-odd-item'><span>大小球 {formatDXQOdd(DXQArr[1])}球</span></div>
            // ? <div className='AI-game-card-odd-item'><span>大小球 {DXQArr[0]} {DXQArr[1]} {DXQArr[2]}</span></div>
            : null
        }
        {/*{!SFPArr.every(i => i === 0)*/}
        {/*    ? <div className='AI-game-card-odd-item'><span>欧赔 {SFPArr[0]} {SFPArr[1]} {SFPArr[2]}</span></div>*/}
        {/*    : null*/}
        {/*}*/}
        {RQ.oddsArr.every(i => i === 0) && DXQ.oddsArr.every(i => i === 0)
            ? <div className='AI-game-card-odd-item' />
            : null
        }
    </div>

    const login = LocalStorageService.get('isLogin')
    let icons = <div className='AI-game-card-icons'>
        {login && infoOffer ? infoIcon : null}
        {isVodLive ? liveIcon : null}
    </div>

    const mainTemplate = (
        <div
            className={`AI-game-card-ctn${isStarted ? ' AI-game-card-ctn-live' : ''} flex-space-between`}
            onClick={() => history.push(`game/${matchId}`, {matchId, status, AIBtnClick: true,})}

        >
            {competitionName}
            {isStarted ? curTimeTemplate : scheduleDiv}
            {icons}
            {teamIcon(homeTeam)}
            {isStarted && !isDelay ? score : vs}
            {teamIcon(awayTeam, false)}
            {odds}
        </div>
    )

    return <>
        {mainTemplate}
    </>
}

const mapState = state => ({
    gameState: state.game
})

export default connect(mapState)(withRouter(AIGameCard))
